<template>
  <div class="gauge-chart-03 chart" ref="gaugeChart03Ref"></div>
</template>

<script setup>
import { ref, onMounted, inject } from "vue";
const gaugeChart03Ref = ref(null);
const echarts = inject("$echarts");

const seriesData = 20;
const option = {
  compCode: "C202310033",
  backgroundColor: "#022640",
  tooltip: {
    backgroundColor: "#053962", // 设置背景色为半透明红色
    borderColor: "#165e9e", // 设置边框颜色
    borderWidth: 1,
    color: "#fff",
    formatter: "{a} <br/>{b} : {c}%",
    show: false,
  },
  series: [
    {
      name: "最外部进度条",
      type: "gauge",
      radius: "70%",
      splitNumber: 100,
      axisLine: {
        lineStyle: {
          color: [
            [
              0.2,
              new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 1,
                  color: "rgba(81, 254, 97, 1)",
                },
                {
                  offset: 0,
                  color: "rgba(255, 233, 109, 1)",
                },
              ]),
            ],
            [
              0.4,
              new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: "rgba(255, 233, 109, 1)",
                },
                {
                  offset: 1,
                  color: "rgba(251, 157, 61, 1)",
                },
              ]),
            ],
            [
              0.6,
              new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: "rgba(251, 157, 61, 1)",
                },
                {
                  offset: 1,
                  color: "rgba(202, 12, 61, 1)",
                },
              ]),
            ],
            [
              0.8,
              new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: "rgba(202, 12, 61, 1)",
                },
                {
                  offset: 1,
                  color: "rgba(107, 12, 158, 1)",
                },
              ]),
            ],
            [
              1,
              new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 1,
                  color: "rgba(107, 12, 158, 1)",
                },
                {
                  offset: 0,
                  color: "rgba(121, 0, 0, 1)",
                },
              ]),
            ],
          ],
          width: 20,
        },
      },
      axisLabel: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: false,
      },
      itemStyle: {
        show: false,
      },
      detail: {
        show: false,
      },
      title: {
        // 标题
        show: false,
      },
      data: [
        {
          name: "title",
          value: seriesData,
        },
      ],
      pointer: {
        show: false,
      },
      animationDuration: 4000,
    },
    {
      name: "内部进度条",
      type: "gauge",
      // center: ['50%', '50%'],
      radius: "44%",
      z: 4,
      splitNumber: 10,
      axisLine: {
        lineStyle: {
          color: [
            [
              0.1,
              new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: "rgba(81, 254, 97, 1)",
                },
                {
                  offset: 1,
                  color: "rgba(0, 236, 172, 1)",
                },
              ]),
            ],
            [
              0.25,
              new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: "rgba(255, 233, 109, 1)",
                },
                {
                  offset: 1,
                  color: "rgba(251, 157, 61, 1)",
                },
              ]),
            ],
            [1, "#222e7d"],
          ],
          width: 0,
        },
      },
      axisLabel: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: false,
      },

      detail: {
        formatter: function (value) {
          if (value !== 0) {
            let num = Math.round(value);
            return parseInt(num).toFixed(0) + "";
          } else {
            return 0;
          }
        },
        offsetCenter: [0, 50],
        padding: [0, 0, 0, 0],
        fontSize: 30,
        fontWeight: "700",
        color: "#468EFD",
      },
      title: {
        // 标题
        show: false,
        offsetCenter: [0, 46], // x, y，单位px
        color: "rgba(46, 143, 255, 1)",
        fontSize: 30, // 表盘上的标题文字大小
        fontWeight: 700,
        fontFamily: "PingFangSC",
      },
      data: [
        {
          name: "",
          value: seriesData,
        },
      ],
      itemStyle: {
        color: "#00FFBA",
      },
      pointer: {
        show: true,
        length: "100%",
        radius: "20%",
        width: 50, // 指针粗细
      },
      animationDuration: 4000,
    },
    // 内圆
    {
      name: "内圆",
      type: "pie",
      legendHoverLink: false,
      radius: "31%",
      z: 4,
      emphasis: {
        scale: false
      },
      labelLine: {
        show: false,
      },
      data: [
        {
          value: 0,
        },
        {
          value: 10,
          itemStyle: {
            color: "#0E1327",
          },
          emphasis: {
            color: "#0E1327",
          },
        },
      ],
    },
    // 圆环
    {
      name: "小圆形",
      type: "pie",
      legendHoverLink: false,
      radius: ["30%", "31%"],
      z: 5,
      emphasis: {
        scale: false
      },
      labelLine: {
        show: false,
      },
      data: [
        {
          value: 0,
        },
        {
          value: 10,
          itemStyle: {
            color: "#00FFBA",
          },
        },
      ],
    },
    {
      name: "外部刻度",
      type: "gauge",
      //  center: ['20%', '50%'],
      radius: "60%",
      min: 0, // 最小刻度
      max: 100, // 最大刻度
      splitNumber: 5, // 刻度数量
      startAngle: 225,
      endAngle: -45,
      axisLine: {
        show: false,
        lineStyle: {
          width: 1,
          color: [
            [0, "#0089FF"],
            [1, "#0089FF"],
          ],
        },
      }, // 仪表盘轴线
      axisLabel: {
        show: true,
        color: "#A9EDFF",
        fontSize: "36",
        distance: -115,
        formatter: function (v) {
          switch (v + "") {
            case "0":
              return "0";
            case "20":
              return "20";
            case "40":
              return "40";
            case "60":
              return "60";
            case "80":
              return "80";
            case "100":
              return "100";
          }
        },
      }, // 刻度标签。
      axisTick: {
        show: false,
        splitNumber: 7,
        lineStyle: {
          color: "#42E5FB", // 用颜色渐变函数不起作用
          width: 2,
        },
        length: 8,
      }, // 刻度样式
      splitLine: {
        show: true,
        length: 15,
        lineStyle: {
          color: "#42E5FB", // 用颜色渐变函数不起作用
        },
      },
      pointer: {
        show: true,
      },
    },
  ],
};

onMounted(() => {
  const chart = echarts.init(gaugeChart03Ref.value);
  chart.setOption(option);
});
</script>
